import React from 'react';
import moment from 'moment';
import { Form, Input, Button, DatePicker, Select } from 'antd';

const RangePicker = DatePicker.RangePicker;

function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

function disabledDate(current) {
    return current && current > moment().endOf('day');
}

function disabledDateTime() {
    return {
        disabledHours: () => range(0, 24).splice(moment().hour() + 1),
    };
}

class VehSearchForm extends React.Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            let postvalue = {};
            //console.log('Received values of form: ', values);
            for (let key of Object.keys(values)) {
                if (values[key] !== undefined && values[key] !== '') {
                    postvalue[key] = values[key];
                }
            }
            if (postvalue.date && postvalue.date.length > 0) {
                const startSubDate = postvalue.date[0].format('YYYY-MM-DD');
                const endSubDate = postvalue.date[1].format('YYYY-MM-DD');
                postvalue = {
                    ...postvalue,
                    startSubDate,
                    endSubDate,
                };
                delete postvalue.date;
            }
            this.props.onSearch(postvalue);
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline" onSubmit={this.handleSubmit}>
                <Form.Item>
                    {getFieldDecorator('date', {
                        initialValue: [moment().subtract(8, 'days'), moment().subtract(1, 'days')],
                    })(
                        <RangePicker
                            format="YYYY-MM-DD"
                            disabledDate={disabledDate}
                            disabledTime={disabledDateTime}

                        />
                    )}
                </Form.Item>
                <Form.Item>{getFieldDecorator('devUuid')(<Input placeholder="UUID" />)}</Form.Item>
                <Form.Item>{getFieldDecorator('vehLicplate')(<Input placeholder="车牌号" />)}</Form.Item>
                <Form.Item>{getFieldDecorator('vehCompany')(<Input placeholder="车辆所属公司" />)}</Form.Item>
                <Form.Item>
                    {getFieldDecorator('cityId')(<Select placeholder="所属城市" allowClear="true" style={{ width: 180 }} >
                        {this.props.city.map(item => (
                            <Select.Option value={item.code}>{item.name}</Select.Option>
                        ))}
                    </Select>)}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        查询
          </Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create({ name: 'search_form' })(VehSearchForm);
